<template>
  <div
    ref="dragWrapper"
    class="org-tree-drag-wrapper"
    @mousedown="mousedownView"
    @contextmenu="handleDocumentContextmenu"
  >
    <div class="org-tree-wrapper" :style="orgTreeStyle">
      <v-org-tree
        v-if="data"
        :data="data"
        :node-render="nodeRender"
        :expand-all="true"
        @on-node-click="handleNodeClick"
        collapsable
      ></v-org-tree>
    </div>
  </div>
</template>

<script>
import { on, off } from "@/libs/tools";
const menuList = [
  {
    key: "edit",
    label: "编辑部门",
  },
  {
    key: "detail",
    label: "查看部门",
  },
  {
    key: "new",
    label: "新增子部门",
  },
  {
    key: "delete",
    label: "删除部门",
  },
];
export default {
  name: "OrgView",
  props: {
    zoomHandled: {
      type: Number,
      default: 1,
    },
    data: Object,
  },
  data() {
    return {
      currentContextMenuId: "",
      orgTreeOffsetLeft: 0,
      orgTreeOffsetTop: 0,
      initPageX: 0,
      initPageY: 0,
      oldMarginLeft: 0,
      oldMarginTop: 0,
      canMove: false,
    };
  },
  computed: {
    orgTreeStyle() {
      return {
        transform: `translate(-50%, -50%) scale(${this.zoomHandled}, ${this.zoomHandled})`,
        marginLeft: `${this.orgTreeOffsetLeft}px`,
        marginTop: `${this.orgTreeOffsetTop}px`,
      };
    },
  },
  methods: {
    handleNodeClick(e, data, expand) {
      expand();
    },
    closeMenu() {
      this.currentContextMenuId = "";
    },
    getBgColor(data) {
      return this.currentContextMenuId === data.id
        ? data.isRoot
          ? "#0d7fe8"
          : "#5d6c7b"
        : "";
    },
    nodeRender(h, data) {
      // return (
      //   <div
      //     class={[
      //       "custom-org-node",
      //       data.children && data.children.length ? "has-children-label" : "",
      //     ]}
      //     on-mousedown={(event) => event.stopPropagation()}
      //     on-contextmenu={this.contextmenu.bind(this, data)}
      //   >
      //     {data.label}
      //     <dropdown
      //       trigger="custom"
      //       class="context-menu"
      //       visible={this.currentContextMenuId === data.id}
      //       nativeOn-click={this.handleDropdownClick}
      //       on-on-click={this.handleContextMenuClick.bind(this, data)}
      //       style={{
      //         transform: `scale(${1 / this.zoomHandled}, ${
      //           1 / this.zoomHandled
      //         })`,
      //       }}
      //       v-click-outside={this.closeMenu}
      //     >
      //       <dropdown-menu slot="list">
      //         {menuList.map((item) => {
      //           return (
      //             <dropdown-item name={item.key}>{item.label}</dropdown-item>
      //           );
      //         })}
      //       </dropdown-menu>
      //     </dropdown>
      //   </div>
      // );
    },
    contextmenu(data, $event) {
      let event = $event || window.event;
      event.preventDefault
        ? event.preventDefault()
        : (event.returnValue = false);
      this.currentContextMenuId = data.id;
    },
    setDepartmentData(data) {
      data.isRoot = true;
      this.departmentData = data;
    },
    mousedownView(event) {
      this.canMove = true;
      this.initPageX = event.pageX;
      this.initPageY = event.pageY;
      this.oldMarginLeft = this.orgTreeOffsetLeft;
      this.oldMarginTop = this.orgTreeOffsetTop;
      on(document, "mousemove", this.mousemoveView);
      on(document, "mouseup", this.mouseupView);
    },
    mousemoveView(event) {
      if (!this.canMove) return;
      const { pageX, pageY } = event;
      this.orgTreeOffsetLeft = this.oldMarginLeft + pageX - this.initPageX;
      this.orgTreeOffsetTop = this.oldMarginTop + pageY - this.initPageY;
    },
    mouseupView() {
      this.canMove = false;
      off(document, "mousemove", this.mousemoveView);
      off(document, "mouseup", this.mouseupView);
    },
    handleDropdownClick(event) {
      event.stopPropagation();
    },
    handleDocumentContextmenu() {
      this.canMove = false;
    },
    handleContextMenuClick(data, key) {
      this.$emit("on-menu-click", { data, key });
    },
  },
  mounted() {
    on(document, "contextmenu", this.handleDocumentContextmenu);
  },
  beforeDestroy() {
    off(document, "contextmenu", this.handleDocumentContextmenu);
  },
};
</script>